<template>
	<ul>
		<li>news001 <input type="text"></li>
		<li>news002 <input type="text"></li>
		<li>news003 <input type="text"></li>
    <h2 :style="{opacity}">欢迎来到长沙</h2>
	</ul>
</template>

<script>
	export default {
		name:'News',
    data() {
      return {
        opacity: 1,
      }
    },
    mounted() {
      console.log('News组件被挂载了')
    },
    beforeDestroy() {
			console.log('News组件即将被销毁了')
      // clearInterval(this.timer)
		},
    activated() {
      console.log('News组件被激活了')
      this.timer = setInterval(()=> {
        this.opacity -= 0.01
        if (this.opacity <= 0) {
          this.opacity = 1
        }
      },20)
    },
    deactivated() {
      console.log('News组件被失活了')
      clearInterval(this.timer)

    }
  }
</script>